<template>
  <view class="team">
    <view class="navbar1">
      <view class="iconfont icon-xiangzuo"
            @tap='returns'></view>
      <text>我的团队</text>
    </view>
    <view style="height:96rpx"></view>
    <view class='nav acea-row row-around'>
      <view :class="grade == 0 ? 'item on' : 'item'"
            @click='setType(0)'>下级分销</view>
      <view :class="grade == 1 ? 'item on' : 'item'"
            @click='setType(1)'>下下级分销</view>
    </view>
    <view class="vip acea-row row-around"
          v-if="grade == 0">
      <view :class="vips == 1 ? 'bb' : ''"
            @click="hlanderVip(1)">VIP1</view>
      <view :class="vips == 2 ? 'bb' : ''"
            @click="hlanderVip(2)">VIP2</view>
      <view :class="vips == 3 ? 'bb' : ''"
            @click="hlanderVip(3)">VIP3</view>
      <view :class="vips == 0 ? 'bb' : ''"
            @click="hlanderVip(0)">其他</view>
    </view>
    <view class="totle">
      <view class="texc"
            v-if="grade == 0">
        下级分销商共：{{firstTotal}} 人
      </view>
      <view class="texc"
            v-if="grade == 1">
        下下级分销商共：{{twoTotal}}人
      </view>
    </view>
    <view class="list acea-row  row-between-wrapper"
          v-if="grade == 0">
      <view class="list-tt">头像</view>
      <view class="list-tt">昵称</view>
      <view class="list-tt">注册时间</view>
    </view>
    <block v-if="grade == 0 && vips == 1">
      <view class="list acea-row  row-between-wrapper"
            v-for="(item, index) in vip1"
            :key="index">
        <image class="log"
               :src="item.avatar"></image>
        <view class="tx">{{item.nickname}}</view>
        <view class="tx">{{new Date(item.spread_time).toLocaleString().split('-')[0]}}</view>
      </view>
    </block>

    <block v-if="grade == 0 && vips == 2">
      <view class="list acea-row  row-between-wrapper"
            v-for="(item, index) in vip2"
            :key="index">
        <image class="log"
               :src="item.avatar"></image>
        <view class="tx">{{item.nickname}}</view>
        <view class="tx">{{dateFormat("YYYY-mm-dd HH:MM", item.spread_time)}}</view>
      </view>
    </block>

    <block v-if="grade == 0 && vips == 3">
      <view class="list acea-row  row-between-wrapper"
            v-for="(item, index) in vip3"
            :key="index">
        <image class="log"
               :src="item.avatar"></image>
        <view class="tx">{{item.nickname}}</view>
        <view class="tx">{{dateFormat("YYYY-mm-dd HH:MM", item.spread_time)}}</view>
      </view>
    </block>
    <block v-if="grade == 0 && vips == 0">
      <view class="list acea-row row-between-wrapper"
            v-for="(item, index) in qt"
            :key="index">
        <image class="log"
               :src="item.avatar"></image>
        <view class="tx">{{item.nickname}}</view>
        <view class="tx">{{dateFormat("YYYY-mm-dd HH:MM", item.spread_time)}}</view>
      </view>
    </block>
  </view>
</template>

<script>
import { getUser, getTcode } from '@/api/user.js'
export default {
  data() {
    return {
      grade: 0,
      vips: 1,
      firstList: [],
      twoList: [],
      firstTotal: 0,
      twoTotal: 0,
      vip1: [],
      vip2: [],
      vip3: [],
      qt: [],
    }
  },
  created() {
    this.getUserInfos()
  },
  methods: {
    dateFormat(fmt, date) {
      let ret
      let dates = new Date(date)
      const opt = {
        'Y+': dates.getFullYear().toString(), // 年
        'm+': (dates.getMonth() + 1).toString(), // 月
        'd+': dates.getDate().toString(), // 日
        'H+': dates.getHours().toString(), // 时
        'M+': dates.getMinutes().toString(), // 分
        'S+': dates.getSeconds().toString(), // 秒
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          )
        }
      }
      return fmt
    },
    async getUserInfos() {
      const res = await getUser()
      console.log(res)
      this.firstList = res.data.first.data
      this.twoList = res.data.two.data
      this.twoTotal = res.data.two.total
      this.firstTotal = res.data.first.total
    },
    setType(type) {
      this.grade = type
    },
    hlanderVip(type) {
      this.vips = type
      if (type == 1) {
        this.vip1 = this.firstList.filter((item) => {
          if (item.level == 1) {
            return item
          }
        })
        console.log(this.vips)
      }

      this.vip2 = this.firstList.filter((item) => {
        if (item.level == 2) {
          return item
        }
      })
      this.vip3 = this.firstList.filter((item) => {
        if (item.level == 3) {
          return item
        }
      })
      this.qt = this.firstList.filter((item) => {
        if (item.level == 0) {
          return item
        }
      })
    },
    returns() {
      uni.navigateBack()
    },
  },
}
</script>

<style>
.team {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f7f7f7;
  z-index: -1;
}
.team .vip {
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.team .totle {
  height: 126rpx;
  line-height: 126rpx;
  text-align: center;
  background-color: #ef271e;
}
.texc {
  font-size: 40rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ffffff;
}
.list {
  text-align: center;
  margin: 20rpx 0;
  padding: 0 20rpx;
}
.list-tt {
  height: 110rpx;
  line-height: 110rpx;
  padding: 0 10rpx;
  font-size: 32rpx;
  font-weight: 600;
}
.log {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}
.tx {
  height: 80rpx;
  line-height: 80rpx;
}
.nav {
  background-color: #fff;
  height: 86rpx;
  line-height: 86rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 30rpx;
  color: #282828;
  box-shadow: 0 0 #ccc 0;
}

.nav .item.on {
  height: 84rpx;
  border-bottom: 6rpx solid #e93323;
  color: #ef271e;
}
.bb {
  height: 60rpx;
  border-bottom: 2rpx solid #000000;
}
</style>
